<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>Index</template>
          <el-menu-item-group>
            <template slot="title">Index</template>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>订单</template>
          <el-menu-item-group>
            <template slot="title">订单详情</template>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3" @click.native="user()">
          <template slot="title"><i class="el-icon-setting" ></i>人员管理</template>
          <!-- <el-menu-item-group>
            <template slot="title">人员详情</template>
          </el-menu-item-group> -->
        </el-submenu>
      </el-menu>
    </el-aside>
    
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item @click="dialogVisible2 = true">新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dialog  
          title="添加记录"  
          :visible.sync="dialogVisible2"  
          width="50%"  
          @close="handleDialogClose"  
        >  
          <el-form :model="formData" ref="formData" label-width="120px">  
            <!-- ... 表单内容 ... -->  
            <el-form-item>  
              <el-button type="primary" @click="addRecord">提交</el-button>  
              <el-button @click="dialogVisible2 = false">取消</el-button>  
            </el-form-item>  
          </el-form>  
        </el-dialog>  
        <el-button @click="dialogVisible2 = true">添加记录</el-button>    
      </el-header>
      
      <el-main>
        <el-table :data="tableData">
          <el-table-column prop="number" label="订单号" width="140">
          </el-table-column>
          <el-table-column prop="name" label="id" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
          <el-table-column prop="date" label="日期">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">  
        <el-button  
          size="mini"  
          @click="handleEdit(scope.row)">编辑</el-button>  
        <el-button  
          size="mini"  
          type="danger"  
          @click="handleDelete(scope.row)">删除</el-button>  
      </template>  
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
  
</template>
  
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2024-05-02',
          name: 'yy',
          address: '浙江省温州市*******',
          number:'9082948448'
        }, {
          date: '2024-08-04',
          name: '小云',
          address: '浙江省温州市*******',
          number:'4372435346'
        }, {
          date: '2023-09-01',
          name: '水水',
          address: '浙江省温州市*******',
          number:'4372124345'
        }, {
          date: '2024-04-12',
          name: 'wdwdf',
          address: '上海市普陀区********',
          number:'4372655466'
        }, {
          date: '2024-03-14',
          name: 'ftut',
          address: '上海市普陀区*******',
          number:'4376756325'
        }, {
          date: '2024-06-27',
          name: '安安',
          address: '浙江省温州市*******',
          number:'4365467325'
        }, {
          date: '2024-04-28',
          name: '大奔',
          address: '上海市静安区********',
          number:'4372634325'
        }, {
          date: '2024-08-16',
          name: '跳跳',
          address: '北京市朝阳区********',
          number:'4372645445'
        }],
        dialogVisible: false, 
        dialogVisible2: false,  
        editRow: null, 
        editForm: { 
          date: '',  
          name: '',  
          address:'',
          number:''
        },  
        formData: {  
          date: '',  
          name: '',  
          address: '',  
          number: ''  
        }  
      }
    },
    methods: {  
      handleEdit(row) {  
        this.dialogVisible = true;  
        this.editRow = row;  
        this.editForm.number = row.number;  
        this.editForm.name = row.name;  
        this.editForm.date = row.date; 
        this.editForm.address = row.address; 
      },  
      handleEditSubmit() {   
        console.log('编辑的数据：', this.editForm);    
        this.editRow.number = this.editForm.number;  
        this.editRow.name = this.editForm.name;  
        this.editRow.address = this.editForm.address; 
        this.editRow. date= this.editForm.date; 
        this.dialogVisible = false; 
      },  
      handleDelete(row) {  
        console.log('删除', row);  
        this.tableData = this.tableData.filter(item => item !== row);  
      } ,
      user(){
        this.$router.push('/user')
      },
      addRecord() {  
        this.$refs.formData.validate(async (valid) => {  
          if (valid) {   
            this.tableData.push({  
              ...this.formData  
            });   
            this.formData = {  
              date: '',  
              name: '',  
              address: '',  
              number: ''  
            };   
            this.dialogVisible2 = false;  
          } else {  
            console.log('表单验证失败！');  
            return false;  
          }  
        });  
      } ,
      handleDialogClose() {  
        this.resetForm();  
      },  
      resetForm() {  
        this.formData = {  
          date: '',  
          name: '',  
          address: '',  
          number: ''  
        };  
      },  
      addRecord() {  
        this.$refs.formData.validate(async (valid) => {  
          if (valid) {  

            this.tableData.push({ ...this.formData });  
            this.dialogVisible2 = false;  
            this.resetForm();  
          } else {  
            console.log('表单验证失败！');  
            return false;  
          }  
        });  
      }   

  },  
};  

</script>